<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>在线简历</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_974371_cqiyab42oyq.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_2725541_053en4dwuqt3.css">
  <style>
    /*css reset*/
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    ul {
      margin-left: 1em;
    }

    li {
      margin-top: 10px;
    }

    strong {
      color: rgb(87, 183, 175);
    }

    a {
      color: #333;
      text-decoration: none;
      border-bottom: 2px solid rgb(63, 207, 195);
    }

    /*layout*/
    body {
      display: grid;
      grid: auto auto auto / 1fr;
      padding: 0 10px 30px 10px;
      max-width: 21cm;
      min-height: 29.7cm;
      margin: 0 auto;

    }

    main {
      grid-column: 1;
      grid-row: 2;
    }

    aside {
      grid-column: 1;
      grid-row: 1;
    }

    /*common*/
    body {
      font: 17px/1.5 Arial;
      color: #333;
      padding-bottom: 30px;
    }

    /*page*/
    section {
      display: grid;
      grid: auto auto / 50px 120px 1fr;
      align-items: center;
      padding: 0px 10px 10px;
    }

    section>.iconfont {
      grid-row: 1;
      grid-column: 1;
      display: block;
      width: 30px;
      height: 30px;
      background: #66a9a3;
      border-radius: 50%;
      font-size: 20px;
      text-align: center;
      color: #fff;
    }

    section>h2 {
      grid-row: 1;
      grid-column: 2;
      font-size: 18px;
    }

    section>hr {
      grid-row: 1;
      grid-column: 3;
      border: none;
      height: 3px;
      background: #66a9a3;
    }

    section>.detail {
      grid-row: 2;
      grid-column: 2/span 2
    }

    section>.detail02 {
      grid-row: 3;
      grid-column: 2/span 2
    }

    section .icon-list {
      display: flex;
      align-items: center;
    }

    section .icon-list .iconfont {
      font-size: 20px;
      margin-right: 10px;
    }

    section .skill-bar dt {
      margin-top: 10px;
    }

    section .skill-bar dd {
      height: 3px;
      background: #eaeaea;
    }

    section .skill-bar dd div {
      height: 100%;
      background: #66a9a3;
      margin-top: 10px;
    }

    section .timeline-panel {
      display: grid;
      grid: auto auto / auto 1fr auto;
      align-items: center;
      margin-top: 10px;
    }

    section .timeline-panel>h3 {
      grid-row: 1;
      grid-column: 1;
    }

    section .timeline-panel .intro {
      grid-row: 1;
      grid-column: 3;
      color: #666;
    }

    section .timeline-panel .detail {
      grid-row: 2;
      grid-column: 1/span 3;
    }

    .userInfo {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 10px 0 50px;
    }

    .userInfo img {
      width: 90px;
    }

    section .basicInfo {
      display: flex;
    }

    section .basicInfo div {
      padding-top: 5px;
    }

    section .basicInfo .last {
      padding-left: 20px;
    }

    @media (max-width:500px) {
      .userInfo img {
        display: none;
      }

      section .basicInfo {
        display: inline-block;
      }

      section .basicInfo .last {
        padding-top: 0;
        padding-left: 0;
      }
    }

    .pageCut {
      margin-top: 0px;
    }
  </style>
</head>

<body>
  <aside>
    <header class="userInfo">
      <div>
        <h2>康毅龙</h2>
        <div class="detail">
          求职意向：前端开发工程师
        </div>
      </div>
      <img src="https://i.loli.net/2021/10/29/AEQDrgG7S4vhOtJ.jpg" />
    </header>
    <!-- 基本信息 -->
    <section>
      <span class="iconfont icon-personal"></span>
      <h2>基本信息</h2>
      <hr>
      <div class="detail basicInfo">
        <div>
          <div class="icon-list"><span class="iconfont icon-phone"></span><a
              href="tel:18398203270">18398203270（微信同号）</a></div>
          <div class="icon-list"><span class="iconfont icon-github"></span><a
              href="https://github.com/adekang">GitHub</a></div>

        </div>
        <div class='last'>
          <div class="icon-list"><span class="iconfont icon-email"></span><a
              href="mailto:adekang@163.com">adekang@163.com</a></div>
        </div>
      </div>
    </section>
    <!-- 掌握技能 -->
    <section>
      <span class="iconfont icon-introduction"></span>
      <h2>掌握技能</h2>
      <hr>
      <div class="detail">
        <ul>
          <li>熟悉使用HTML5标签编写语义化页面。</li>
          <li>
            掌握CSS工程化解决方案，主要是预处理器（<strong>SCSS</strong> ），了解postCSS、<strong>CSS-In-JS</strong>、css modules 、原子CSS
          </li>
          <li>熟悉 JavaScript、<strong>TypeScript</strong> 的使用，关注ES新动态，</li>
          <li>熟练使用 <strong>React</strong>、<strong>React-router</strong>和Redux，并有相关项目经验。会使用常用<strong>Hooks
              API</strong>、生命周期、高阶组件。 React框架实现原理的理解。</li>
          <li>熟悉<strong>Vue</strong>框架的模版语法，<strong>响应式原理</strong>，。会使用<strong>Vue-router</strong>、Vuex。</li>
          <li>熟悉前端工程化，掌握webpack相关配置及优化</li>
          <li>了解Git 、Gitlab工作部署；</li>
        </ul>
      </div>
    </section>
  </aside>
  <main>
    <!-- 项目经历 -->
    <section>
      <span class="iconfont icon-project"></span>
      <h2>项目经历</h2>
      <hr>
      <div class="detail">
        <div class="timeline-panel">
          <h3>lu ui</h3>
          <p class="intro">
            <a href="https://github.com/adekang/lu-ui">源码私有</a>
            <a href="https://adekang.github.io/lu-ui/#/">项目预览</a>
          </p>
          <div class="detail">
            <ul>
              <li>技术栈： <strong>React</strong> 、<strong>TypeScript</strong>、<strong>SCSS</strong> </li>
              <li>实现组件：Button组件：支持各种样式，支持中大小三种尺寸； icon组件：使用svg制作icon组件，支持自定义大小和颜色；
                input组件：支持头尾文字自定义，支持icon，支持大小变更；layout组件和移动端下拉刷新组件等，整个官网的制作是使用自己的组件制作</li>
              <li>同时使用Vue3制作了相关组件，<a href="https://adekang.github.io/vue_beans-ui-web/#/">beans UI 项目预览</a>，制作beans
                ui遇到的问题记录在<a href="https://www.yuque.com/u12163881/kamvne/fmtkf7">个人博客</a></li>
            </ul>
          </div>
        </div>
        <div class="timeline-panel">
          <h3>豆子记账</h3>
          <p class="intro">
            <a href="https://github.com/adekang/react-beans-bookkeeping">源码私有</a>
            <a href="https://adekang.github.io/react-beans-bookkeeping-web/#/index">项目预览</a>
          </p>
          <div class="detail">
            <ul>
              <li>
                技术栈：<strong>React</strong>、<strong>React-router</strong>、<strong>TypeScript</strong>、<strong>styled-components</strong>
                开发的单移动端页面应用。</li>
              <li>项目介绍：本应用使用React-router划分了三个分页面:记账，首页，明细，统计。 实现了复杂信息保存，数据统计展示，使用自定义Hooks + localstorage
                实现状态管理,使用day.js实现时间管理。</li>
              <li>实现功能：<strong>记账</strong>、明细、<strong>数据统计</strong>。</li>
              <li>该项目制作时，遇到 webpack 问题，解决方案记录在<a href="https://www.yuque.com/u12163881/kamvne/him1ql">个人博客</a>。</li>
            </ul>
          </div>
        </div>
      </div>
      </div>
    </section>

    <div class="pageCut"></div>
    <!-- 开源项目 -->
    <section>
      <span class="iconfont icon-project"></span>
      <h2>开源项目</h2>
      <hr>
      <div class="detail">
        <div class="timeline-panel">
          <h3>云音乐</h3>
          <p class="intro">
            <a href="https://github.com/adekang/cloud-music-v1">源码私有</a>
            <a href="https://adekang.github.io/cloud-music-v1/#/recommend">项目预览</a>
          </p>
          <div class="detail">
            <ul>
              <li>技术栈：React全家桶、TypeScript、SCSS</li>
              <li>项目介绍：项目介绍:基于react 全家桶(包含 Hooks)以及 immutable 数据流为基础仿网易云音乐 UI 打造
                一款高质量的 WebApp。</li>
              <li> 实现推荐页、排行页、歌手页，搜索页等页面。</li>
              <li> 使用react-transition-group实现页面切换连贯丝滑。</li>
              <li> 使用immutable库进行持久性数据结构处理。</li>
              <li> 重要组件有：Player组件实现小屏和全屏播放器，实现三种播放模式。基于better-scroll封装
                的scroll 组件，使界面滑动更加顺畅。</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
    <!-- 实习经历 -->
    <section>
      <span class="iconfont  icon-introduction"></span>
      <h2>实习经历</h2>
      <hr>
      <div class="detail">
        <div class="timeline-panel">
          <h3>百词斩</h3>
          <div class="date"> &nbsp &nbsp &nbsp 2021.09~2021.12</div>
          <div class="detail">
            <li>担任职务：前端实习生</li>
            <li>任务工作：协助开发柚子鸭C端项目（Taro + react），协助开发B端后台管理系统（umi + antD）</li>
            <li>个人开发下拉刷新组件，实现C端H5页面下拉刷新功能</li>
            <li>熟悉整个工作流程，多人协同开发</li>
          </div>
        </div>
      </div>
    </section>
    <!-- 教育经历 -->
    <section>
      <span class="iconfont icon-education"></span>
      <h2>教育经历</h2>
      <hr>
      <div class="detail">
        <div class="timeline-panel">
          <h3>成都东软学院</h3>
          <div class="date"> &nbsp &nbsp &nbsp 2018.09~2022.07</div>
          <p class="intro">电子商务专业</p>
          <div class="detail">
            <li>主修课程：商务网站网页设计实务、动态商务网站设计基础、电商视觉设计、电子商务数据分析与处理、商务网站美术设计等</li>
            <li>获奖和证书:CET4、计算机二级证书、初级会计证书、新零售比赛二等奖、视频剪辑比赛院一等奖</li>
          </div>
        </div>
      </div>
    </section>
    <!-- 其他链接 -->
    <section>
      <span class="iconfont icon-project"></span>
      <h2>其他链接</h2>
      <hr>
      <div class="detail">
        <ul>
          <li>
            我的 <a href="https://www.yuque.com/u12163881">博客</a>，记录了我整个学习的学习笔记和相关心得。
          </li>
          <li>
            我的 <a href="https://github.com/adekang">GitHub</a>，累计有<strong>1500</strong>余次提交。
          </li>
        </ul>
      </div>
    </section>
  </main>
</body>

</html>